<template>
  <div>
    <div class="inp">
    <el-input
      v-model="input3"
      placeholder="请输入内容"
      class="input-with-select"
      clearable
      @input="inp1()"
    >
      <template #append>
        <el-button :icon="Search" @click="search"/>
      </template>
    </el-input>
    <el-button type="primary" @click="addGoods">添加商品</el-button>
  </div>
    <el-table :data="goodlist.list" style="width: 100%">
      <el-table-column type="index" width="40" />
      <el-table-column prop="goods_name" label="商品名称" width="670" />
      <el-table-column prop="goods_price" label="商品价格(元)" width="105" />
      <el-table-column prop="goods_weight" label="商品重量" />
      <el-table-column prop="goods_number" label="商品数量" />
      <el-table-column prop="add_time" label="创建时间" width="150" />
      <el-table-column prop="" label="操作" width="150">
        <template #default="scope">
          <el-button type="primary" :icon="Edit" />
          <el-button
            type="danger"
            prop="goods_id"
            @click="open(scope.row.goods_id)"
            :icon="Delete"
          />
        </template>
      </el-table-column>
    </el-table>
    <div class="demo-pagination-block">
       <el-config-provider :locale="zhCn">
    <el-pagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[5,10,15,20]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="goodlist.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
       </el-config-provider>
  </div>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
import { goodList, deleteGoods,GetGoods } from "../tools/ajax";
import { Edit, Delete,Search  } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import zhCn from 'element-plus/lib/locale/lang/zh-cn'  // 中文语言插件

const currentPage4 = ref(1)
const pageSize4 = ref(10)
const small = ref(false)
const disabled = ref(false)

// 选择每页几个
const handleSizeChange = (val) => {
  goodList({ pagenum: currentPage4._value, pagesize: pageSize4._value }).then((res) => {
    console.log(res);
    // 时间戳转换为时间
    for (let i = 0; i < res.data.goods.length; i++) {
      const ti = new Date(res.data.goods[i].add_time).toLocaleString();
      res.data.goods[i].add_time = ti;
    }
    goodlist.list = res.data.goods;
  });
}
// 选择第几页
const handleCurrentChange = (val) => {
  goodList({ pagenum: currentPage4._value, pagesize: pageSize4._value }).then((res) => {
    console.log(res);
    // 时间戳转换为时间
    for (let i = 0; i < res.data.goods.length; i++) {
      const ti = new Date(res.data.goods[i].add_time).toLocaleString();
      res.data.goods[i].add_time = ti;
    }
    goodlist.list = res.data.goods;
  });
}

const router = useRouter(); // 获取路由
const input3 = ref()
const goodlist = reactive({});
// 商品列表
function goodLists() {
  goodList({ pagenum: 1, pagesize: 10 }).then((res) => {
    console.log(res);
    // 时间戳转换为时间
    for (let i = 0; i < res.data.goods.length; i++) {
      const ti = new Date(res.data.goods[i].add_time).toLocaleString();
      res.data.goods[i].add_time = ti;
    }
    goodlist.list = res.data.goods;
    goodlist.total=res.data.total
  });
}
goodLists();
// 搜索商品
function search(){
  GetGoods({id:input3._rawValue*1}).then(res=>{
    console.log(res);
    let zslist=reactive([])
    zslist[0]=res.data
    goodlist.list = zslist
  })
}
// 输入框为空时重新调用
function inp1(){
  if (input3._rawValue=="") {
      goodLists();
  }
}
// 删除弹窗
const open = (id) => {
  ElMessageBox.confirm("此操作将永久删除该用户, 是否继续?", "Warning", {
    confirmButtonText: "OK",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      ElMessage({
        type: "success",
        message: "删除成功",
      });
      deleteGood(id);
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};
// 删除商品
function deleteGood(id) {
  console.log(id);
  deleteGoods({ id: id }).then((res) => {
    console.log(res);
    if (res.meta.status == 200) {
      goodLists();
    }
  });
}
// 跳转添加商品页
function addGoods(){
    router.push("/goods/add");
}
</script>
<style scoped lang="less">
.inp {
  width: 500px;
  display: flex;
  margin: 20px 10px;
}
.input-with-select {
  margin-right: 50px;
}

</style>